<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="public/css/mui.min.css" rel="stylesheet" />
		<link href="public/css/style.css" rel="stylesheet" />
		<link href="public/css/iconfont.css" rel="stylesheet" />
		<style>
			body{background-image:url(public/img/login_bg.jpg);background-size:100% 100%;background-repeat:no-repeat}
			#ico{height:30vh;text-align:center;padding-top:13vh}
			#ico img{height:7vh}
			.mui-input-group{margin:0 45px;background-color:transparent}
			.mui-input-group:first-child{margin-top:20px}
			.mui-input-group label{width:12%}
			.mui-input-group:after,.mui-input-group:before{display:none}
			.mui-input-row label{padding:9px 15px 9px 0}
			.mui-input-group .mui-input-row:after{left:0;background-color:#fff}
			.mui-icon{color:#fff}
			.mui-input-row label~input,.mui-input-row label~select,.mui-input-row label~textarea{width:88%;color:#fff}
			input::-webkit-input-placeholder{color:#ccc}
			input::-moz-input-placeholder{color:#ccc}
			input::-ms-input-placeholder{color:#ccc}
			.mui-input-row .iconfont,.mui-input-row .mui-input-clear~.mui-icon-clear{color:#fff}
			.mui-checkbox input[type=checkbox],.mui-radio input[type=radio]{top:6px}
			.mui-content-padded{margin:100px 45px 0 45px}
			.mui-btn{padding:10px;border-radius:25px;border:0}
			.oauth-area{position:absolute;bottom:20px;left:0;text-align:center;width:100%;padding:0;margin:0;color:#ccc;font-size:15px}
			span.random_yzm{position:absolute;right:40px;font-size:20px;top:4px;background:#d5dbfd;padding:5px 15px;letter-spacing:5px;color:#3f4277}
		</style>

	</head>

	<body>
		<div id="ico">
			<img src="public/img/login_ico.png" >
		</div>
		<form id='login-form' class="mui-input-group">
			<div class="mui-input-row">
				<label><span class="iconfont iconzhanghao"></span></label>
				<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入用户名">
			</div>
			<div class="mui-input-row">
				<label><span class="iconfont iconmima"></span></label>
				<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
			</div>
			<div class="mui-input-row">
				<label><span class="iconfont iconyanzhengma"></span></label>
				<input id='yzm' type="number" class="mui-input-clear mui-input" placeholder="请输入验证码">
				<span class="random_yzm">1234</span>
			</div>
		</form>
		<div class="mui-content-padded">
			<button id='login' class="mui-btn mui-btn-block">登录</button>
		</div>
		<div class="mui-content-padded oauth-area">
			未满18周岁禁止购买<br>
			Copyright © ABC 版权所有
		</div>
		<script src="public/js/mui.min.js"></script>
		<script src="public/js/mui.enterfocus.js"></script>
		<script>
			(function($, doc) {
				var loginButton = doc.getElementById('login'),
					accountBox = doc.getElementById('account'),
					passwordBox = doc.getElementById('password'),
					$random_yzm = doc.querySelector('.random_yzm'),
					sjs;	//随机验证码
				
				//随机验证码
				yzminit($random_yzm)	//初始化
				
				//验证码点选切换
				$random_yzm.addEventListener("tap",function() {
					yzminit($random_yzm)
				})
				
				//初始化验证码
				function yzminit (el) {
					var ran = Math.random() + ""
					var sjs = ran.slice(ran.length-4)
					el.innerText = sjs
				}
				
				//登陆事件
				loginButton.addEventListener('tap', function(event) {
					var loginInfo = {
						account: accountBox.value,
						password: passwordBox.value
					};
					
					//校验
					var check = true;
					$("#login-form input").each(function(){
						if(!this.value || this.value.trim() == "") {
							var tag = this.placeholder.slice(3);
							mui.alert(tag + "不允许为空");
							check = false;
							return false;
						}
						
						if(this.id=="yzm" && this.value!=$random_yzm.innerText){
							mui.alert("验证码输入错误");
							yzminit($random_yzm);//重新随机
							check = false;
							return false;
						}
					})
					
					//校验通过
					if(check){
						console.log(loginInfo)
					}
					
				});
				//回车触发
				$.enterfocus('#login-form input', function() {
					$.trigger(loginButton, 'tap');
				});
			}(mui, document));
		</script>
	</body>

</html>